<template>
	<view class="box">
		<view class="info">
			<image src="@/static/img/tishi.png" class="img" mode=""></image>
			<view class="li">
				<view class="left">
					<u-icon name="play-right-fill" color="#000"></u-icon>
					<u-icon name="play-right" color="#000"></u-icon>
				</view>
				<view class="right">
					单面打印:1张纸1页，双面打印:1张纸=2页(双面打印，文档页数为单数时计价加1页，例:3页或4页，计价均按4页)
				</view>
			</view>
		</view>

		<!-- 基础价格 -->
		<view class="price-li">
			<view class="top-select">
				<view class="title">
					基础价格
				</view>
				<view class="annui">
					<u-radio-group v-model="radioValue" size="40rpx" activeColor="#fb8d07">
						<u-radio shape="circle" @change="hdRadio($event,item.type)" :customStyle="{marginRight: '20rpx'}"
							labelSize="30rpx" :label="item.name" :name="item.id" v-for="item in paper" :key="item.id"></u-radio>
					</u-radio-group>
				</view>
			</view>

			<view class="tab">
				<view class="head" v-if="new_list.type===1">
					<view class="left1">纸型</view>
					<view class="left2">单双面</view>
					<view class="left3">颜色</view>
					<view class="left4">普通纸(元/页)</view>
					<view class="left5">护眼纸(元/页)</view>
				</view>
				<view class="head " v-else>
					<view class="left11">
						规格
					</view>

					<view class="left11">
						价格
					</view>
				</view>

				<view class="" v-for="(item,i) in new_list.data" :key="i">
					<view class="tbodys " v-if="new_list.type===2">
						<view class="left11">{{item.name}}</view>
						<view class="left11">{{item.price}}</view>
					</view>
					<view class="tbodys" v-else>
						<view class="left1">{{new_list.name}}</view>
						<view class="left2">{{item.duplex}}</view>
						<view class="left3">{{item.color}}</view>
						<view class="left4">{{item.simple}}</view>
						<view class="left5">{{item.pro}}</view>
					</view>
				</view>

			</view>
		</view>

		<!-- 装订费用 -->
		<view v-if="binding.length" class="price-li">
			<view class="top-select">
				<view class="title">
					装订费用/页数
				</view>
			</view>
			<view class="tab2">
				<view class="head">
					<view class="left1">装订类型</view>
					<view class="left2">单价(元)</view>
					<view class="left3">最大装订页数(页)</view>
				</view>
				<view class="tbodys" v-for="item in binding" :key="item.id">
					<view class="left1">{{item.name}}</view>
					<view class="left2">{{item.price}}</view>
					<view class="left3">{{item.max_page}}</view>
				</view>
				<u-empty v-if="binding.length<1" mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png"
					textSize="30rpx" width="360" height="380" text="无数据...">
				</u-empty>
			</view>
		</view>

		<!-- 封面费用 -->
		<view v-if="covers.length" class="price-li">
			<view class="top-select">
				<view class="title">
					封面费用
				</view>
			</view>
			<view class="tab3">
				<view class="head">
					<view class="left1">封面类型</view>
					<view class="left2">单价(元)</view>
				</view>
				<view class="tbodys" v-for="item in covers" :key="item.id">
					<view class="left1">{{item.name}}</view>
					<view class="left2">{{item.price}}</view>
				</view>
				<u-empty v-if="covers.length<1" mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png"
					textSize="30rpx" width="360" height="380" text="无数据...">
				</u-empty>
			</view>
		</view>

		<!--  -->
		<view class="price-li">
			<view class="top-select">
				<view class="title">
					包邮
				</view>
				<u-icon name="question-circle" labelPos="left" label="不含以下地区" labelSize="26rpx" size="32rpx" color="#A2A2A2"
					@click="$showToast(send.tip)"></u-icon>
			</view>
			<view class="tab3">
				<view class="head">
					<view class="left1">订单金额(元)</view>
					<view class="left2">单价(元)</view>
				</view>
				<view class="tbodys">
					<view class="left1">&gt;{{send.free_price}}</view>
					<view class="left2">{{send.send_price}}</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		UserApi
	} from '@/api';
	export default {
		data() {
			return {
				radioValue: 0,
				all_list: {},
				list: [], //基础价格
				paper: [], //基础价格选择
				binding: [], //装订
				covers: [], //封面
				send: {}
			};
		},
		async onLoad() {
			try {
				const res = await UserApi.getPriceList()
				this.all_list = res.result
				this.paper = res.result['paper'].map((item, i) => {
					if (!item.id) {
						item.id = 'p_' + i
					}
					return item
				})
				this.radioValue = this.paper[0]['id']
				this.binding = res.result['binding']
				this.covers = res.result['covers']
				this.send = res.result['send']

			} catch (e) {
				//TODO handle the exception
				console.log(e);
			}
		},
		methods: {
			async getinfo(id, type) {
				try {
					const res = await UserApi.getPriceList({
						id: type === 2 ? '' : id,
						type
					})
					this.binding = res.result['binding']
					this.covers = res.result['covers']
					this.send = res.result['send']
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}

			},
			hdRadio(id, type) {
				this.getinfo(id, type)
			}
		},
		computed: {
			new_list() {
				let new_all = []
				this.paper.forEach(item => {
					if (item.id === this.radioValue) {
						new_all = item
					}
				})
				return new_all
			}
		}

	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 25rpx;
		box-sizing: border-box;
		width: 100vw;
		padding-bottom: $safe-btm-env;

		.title {
			color: #000000;
			font-size: 30rpx;
			font-weight: 400;
		}

		.price-li {
			width: 700rpx;
			border-radius: 20rpx;
			padding: 30rpx;
			box-sizing: border-box;
			background: #ffffff;

			.head {
				display: flex;
				align-items: center;
				margin: 50rpx 0;

				view {
					color: #919191;
					font-size: 26rpx;
					font-weight: 400;
					text-align: center;
				}
			}

			.tbodys {
				display: flex;
				align-items: center;
				margin-bottom: 40rpx;

				view {
					color: #000;
					font-size: 28rpx;
					font-weight: 400;
					text-align: center;
				}
			}

			.left11 {
				flex: 0 0 50%;
			}

			.tab3 {
				width: 100%;

				.left1,
				.left2,
				{
				flex: 0 0 50%;
			}
		}

		.tab2 {
			width: 100%;

			.left1,
			.left2,
			.left3 {
				flex: 0 0 33.3%;
			}
		}

		.tab {
			width: 100%;

			.left1,
			.left2,
			.left3 {
				flex: 0 0 13.3%;
			}

			.left4,
			.left5 {
				flex: 0 0 30%;
			}
		}

		.top-select {
			display: flex;
			align-items: center;

			.title {
				margin-right: 40rpx;
			}

			.annui {
				flex: 1;
				overflow-x: auto;
			}
		}

	}

	.info {
		width: 700rpx;
		// height: 840rpx;
		border-radius: 20rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
		background: linear-gradient(180deg, #fff8f2 0%, #ffffff 100%);
		margin-bottom: 30rpx;

		.img {
			display: block;
			width: 400rpx;
			height: 46rpx;
			margin: 0 auto;
			margin-top: 33rpx;
			margin-bottom: 46rpx;
		}

		.li {
			width: 620rpx;
			height: 127rpx;
			opacity: 1;
			display: flex;
			align-items: flex-start;
			box-sizing: border-box;
			margin-bottom: 30rpx;

			.right {
				flex: 1;
				margin-left: 10rpx;
				font-size: 26rpx;
				font-weight: 400;
			}

			.left {
				display: flex;
				align-items: center;


			}
		}

	}
	}
</style>